<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <b class="u-f-16">
          <span v-if="objForm.id">编辑</span>
          <span v-else>添加</span>公益收入
        </b>
        <div class="u-right u-5mt">
          <el-button
            type="success"
            size="small"
            icon="el-icon-document-checked"
            @click="submitForm('objForm')"
            v-if="hasPerm('incomeEditPost')"
          >提交保存</el-button>
          <el-button size="small" icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
        </div>
      </div>
      <el-form :model="objForm" :rules="rules" ref="objForm" label-width="100px" class="u-form">
        <el-form-item label="绑定用户">
          <el-input
            v-model="objForm.user_id"
            placeholder="用户id"
            type="hidden"
            style="display: none;"
          />
          <el-image class="head-img" style="width: 60px; height: 60px" :src="objForm.head_img"></el-image>
          <div class="nick-name" >{{objForm.nick_name}}</div>
           <el-link type="primary" class="user-btn" @click="is_user_show = true">选择用户</el-link>
              <el-link type="primary" class="clear-btn" @click="clearUser">清除用户</el-link>
        </el-form-item>
        <el-form-item label="收入时间">
          <el-date-picker
            v-model="objForm.add_time"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择收入时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="收入资金">
          <el-input v-model="objForm.capital" placeholder="请输入收入资金" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="备注说明">
          <el-input
            v-model="objForm.remark"
            type="textarea"
            placeholder="备注说明"
            maxlength="255"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 用户弹出框 -->
    <el-dialog title="选择用户" :visible.sync="is_user_show" width="60%">
      <Users :isprops="true" @user_select="user_select"></Users>

      <span slot="footer" class="dialog-footer">
        <el-button @click="is_user_show = false">取 消</el-button>
        <el-button type="primary" @click="is_user_show = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import commonEdit from "@/mixins/common-edit";
import Users from "@/views/user/list.vue";
export default {
  components: {
    Users
  },
  mixins: [commonEdit],
  data() {
    return {
      activeName: "basic",
      apiName: "income",
      backRoute: "incomeIndex", //成功跳转地址
      is_user_show: false,
      objForm: {
        id: "",
        user_id: 0,
        nick_name: "",
        head_img: "",
        add_time: "", //收入时间
        capital: "", //收入资金
        remark: ""
      }
    };
  },
  methods: {
     clearUser() {
      this.objForm.user_id = 0;
      this.objForm.nick_name = "";
      this.objForm.head_img = "";
    },
    user_select(row) {
      //用户选择
      // window.console.log(row);
      this.objForm.user_id = row.id;
      this.objForm.nick_name = row.nick_name;
      this.objForm.head_img = row.head_img;
      this.is_user_show = false; //关闭弹框
    },
    afterGetInfo() {}
  },
  created() {
    if (this.$route.params.id) {
      this.objForm.id = this.$route.params.id;
    }
  }
};
</script>
<style >
.head-img{
  height: 60px;
  width: 60px;
  border-radius: 60px;
  float: left;
}
.nick-name{
  float: left;
  margin-left: 50px;
  line-height: 60px;
}
.user-btn{
  float: left;
   margin-left: 50px;
  line-height: 60px;
}
.clear-btn {
  float: left;
  margin-left: 50px;
  line-height: 60px;
}
</style>
